<!DOCTYPE html>
<html>
  <!--
    Copyright 2012 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
  -->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Android Asset Studio - Device Frame Generator</title>

    <link rel="stylesheet" href="lib/cssreset-3.4.1.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" title="roboto">
    <link rel="stylesheet" href="css/studio.css">

    <script src="lib/jquery.min.js"></script>

    <script src="js/asset-studio.pack.js"></script>

    <style>
      #outputs {
        border-top: 0;
      }

      #main-container {
        width: 1000px;
      }

      #inout-container {
        width: 100%;

        display: box;
        box-orient: horizontal;
        box-pack: justify;
        box-align: justify;

        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: justify;
        -webkit-box-align: justify;

        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: justify;
        -moz-box-align: justify;
      }

      #inputs {
                box-flex: 1;
        -webkit-box-flex: 1;
           -moz-box-flex: 1;
      }

      #device-list {
        text-align: center;
      }

      #device-list li {
        display: inline-block;
        vertical-align: bottom;
        padding: 8px;
        margin: 0 16px 16px 0;
        text-align: center;
        /*border: 1px dashed rgba(0,0,0,0.4)*/;
      }

      #device-list li .thumb-container {
        opacity: 0.5;
        /*width: 200px;
        height: 150px;*/
        margin-bottom: 8px;

        display: box;
        box-orient: vertical;
        box-pack: end;
        box-align: center;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: end;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: end;
        -moz-box-align: center;
      }

      #device-list li.drag-hover {
        background: #fff;
        box-shadow: 0 0 40px #33b5e5;
      }

      #device-list li.drag-hover .thumb-container {
        opacity: 1;
      }

      #outputs {
        width: 400px;
      }

      #outputs img {
        width: 400px;
      }

      #output {
        margin-top: 16px;
      }
    </style>

    <!-- TODO: remove Analytics tracking if you're building the tools locally! -->
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-18671401-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <body>
    <div id="main-container">
      <div id="page-header">
        <a href="index.html">Android Asset Studio</a>
        <h1>Device Frame Generator</h1>
        <p id="page-intro">
          The device frame generator allows you to quickly wrap your app
          screenshots in real device artwork, providing better context for your screenshots.
          <br><br>
          <strong>New!</strong> Several of these device frames are now part of the official
          <a href="http://developer.android.com/distribute/promote/device-art.html">Device Art
            Generator</a>.
        </p>
      </div>
      <div id="inout-container">
        <div id="inputs">
          <h2>Step 1. <span>Drag a screenshot from your desktop onto a device</span></h2>
          <ul id="device-list"></ul>
        </div>
        <div id="outputs">
          <h2>Step 2. <span>Drag or click to download</span></h2>
          <input type="checkbox" id="output-shadow" checked="checked" class="form-field-checkbutton">
          <label for="output-shadow">With Shadow</label>
          <input type="checkbox" id="output-glare" checked="checked" class="form-field-checkbutton">
          <label for="output-glare">With Screen Glare</label>
          <button id="rotate-button" disabled="disabled">Rotate</button>
          <div id="output">No input image.</div>
        </div>
      </div>
      <div id="footer">
        <p>See the source at the <a href="http://code.google.com/p/android-ui-utils">android-ui-utils</a> Google Code project.</p>
        <p>All generated art is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>. <a href="attribution.html">Attribution info</a></p>
      </div>
    </div>

    <script>
      $(studio.checkBrowser);
      $(studio.ui.setupDragout);

      $('#output-shadow, #output-glare').click(function() {
        createFrame(g_currentDevice, g_currentImage);
      });
      $.event.props.push("dataTransfer");

      var g_currentImage;
      var g_currentDevice;

      var DEVICES = [
        {
          id: 'nexus_7',
          title: 'Nexus 7',
          url: 'http://www.android.com/devices/detail/nexus-7',
          physicalSize: 7,
          physicalHeight: 7.81,
          density: 213,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [363,260],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [265,341],
          portSize: [800,1280],
        },
        {
          id: 'xoom',
          title: 'Motorola XOOM / 10-inch tablet',
          url: 'http://www.google.com/phone/detail/motorola-xoom',
          physicalSize: 10,
          physicalHeight: 6.61,
          density: 160,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [218,191],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [199,200],
          portSize: [800,1280],
        },
        {
          id: 'galaxy_nexus',
          title: 'Galaxy Nexus',
          url: 'http://www.android.com/devices/detail/galaxy-nexus',
          physicalSize: 4.65,
          physicalHeight: 5.33,
          density: 320,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [371,199],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [216,353],
          portSize: [720,1280],
        },
        {
          id: 'nexus_s',
          title: 'Nexus S',
          url: 'http://www.google.com/phone/detail/nexus-s',
          physicalSize: 4.0,
          physicalHeight: 4.88,
          density: 240,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [247,135],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [134,247],
          portSize: [480,800],
        },
        {
          id: 'samsung_galaxy_note',
          title: 'Samsung Galaxy Note',
          url: 'http://www.samsung.com/global/microsite/galaxynote/note/index.html?type=find',
          physicalSize: 5.3,
          physicalHeight: 5.781,
          density: 320,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [353,209],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [289,312],
          portSize: [800,1280],
        },
        {
          id: 'samsung_galaxy_tab_2_7inch',
          title: 'Samsung Galaxy Tab 2 7-inch',
          url: 'http://www.samsung.com/global/microsite/galaxytab2/7.0/index.html?type=find',
          physicalSize: 7,
          physicalHeight: 7.5,
          density: 160,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [230,203],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [274,222],
          portSize: [600,1024],
        },
        {
          id: 'samsung_galaxy_s3',
          title: 'Samsung Galaxy S III',
          url: 'http://www.samsung.com/global/galaxys3/',
          physicalSize: 4.8,
          physicalHeight: 5.38,
          density: 320,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [346,211],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [302,307],
          portSize: [720,1280],
        },
        {
          id: 'htc_one_x',
          title: 'HTC One X',
          url: 'http://www.htc.com/www/smartphones/htc-one-x/',
          physicalSize: 4.7,
          physicalHeight: 5.29,
          density: 320,
          landRes: ['shadow', 'back', 'fore'],
          landOffset: [346,211],
          portRes: ['shadow', 'back', 'fore'],
          portOffset: [302,306],
          portSize: [720,1280],
        }
      ];

      DEVICES = DEVICES.sort(function(x, y) { return x.physicalSize - y.physicalSize; });

      function getDeviceById(id) {
        for (var i = 0; i < DEVICES.length; i++) {
          if (DEVICES[i].id == id)
            return DEVICES[i];
        }
        return;
      }


      var MAX_SIZE_INCHES = 10; // XOOM
      var MAX_DISPLAY_HEIGHT = 126; // XOOM, to fit into 200px wide
      var MAX_HEIGHT = 0;
      for (var i = 0; i < DEVICES.length; i++) {
        MAX_HEIGHT = Math.max(MAX_HEIGHT, DEVICES[i].physicalHeight);
      }

      $.each(DEVICES, function() {
        $('<li>')
            .append($('<div>')
                .addClass('thumb-container')
                .append($('<img>')
                    .attr('src', 'res/device-frames/' + this.id + '/thumb.png')
                    .attr('height', Math.floor(MAX_DISPLAY_HEIGHT * this.physicalHeight / MAX_HEIGHT))))
            .append($('<div>')
                .html('<strong>' +
                  (this.url ? 
                      ('<a href="' + this.url + '">' + this.title + '</a>') :
                      this.title) +
                  '</strong><br>' +  this.physicalSize + '" @ ' + this.density + 'dpi' +
                  '<br>' + this.portSize[0] + 'x' + this.portSize[1]))
            .data('deviceId', this.id)
            .appendTo('#device-list');
      });

      $('#device-list li')
          .live('dragover', function(evt) {
            $(this).addClass('drag-hover');
            evt.dataTransfer.dropEffect = 'link';
            evt.preventDefault();
          })
          .live('dragleave', function(evt) {
            $(this).removeClass('drag-hover');
          })
          .live('drop', function(evt) {
            $('#output').empty().text('Loading...');
            $(this).removeClass('drag-hover');
            g_currentDevice = getDeviceById($(this).closest('li').data('deviceId'));
            evt.preventDefault();
            studio.forms.ImageField.loadImageFromFileList(evt.dataTransfer.files, function(data) {
              if (data == null) {
                $('#output').text('Invalid input image.');
                return;
              }
              imagelib.loadFromUri(data.uri, function(img) {
                g_currentFilename = data.name;
                g_currentImage = img;
                createFrame();
              });
            });
          });

      function createFrame() {
        var port;
        if (g_currentImage.naturalWidth  == g_currentDevice.portSize[0] &&
            g_currentImage.naturalHeight == g_currentDevice.portSize[1]) {
          if (!g_currentDevice.portRes) {
            alert('We don\'t have a portrait frame for this device yet.');
            $('#output').text('No input image.');
            return;
          }
          port = true;
        } else if (g_currentImage.naturalWidth  == g_currentDevice.portSize[1] &&
                   g_currentImage.naturalHeight == g_currentDevice.portSize[0]) {
          if (!g_currentDevice.landRes) {
            alert('We don\'t have a landscape frame for this device yet.');
            $('#output').text('No input image.');
            return;
          }
          port = false;
        } else {
          alert('The screenshot must be ' +
              g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
              ' or ' +
              g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0]);
          $('#output').text('Invalid input image.');
          return;
        }

        // Load image resources
        var res = port ? g_currentDevice.portRes : g_currentDevice.landRes;
        var resList = {};
        for (var i = 0; i < res.length; i++) {
          resList[res[i]] = 'res/device-frames/' + g_currentDevice.id + '/' +
              (port ? 'port_' : 'land_') + res[i] + '.png'
        }

        var resourceImages = {};
        imagelib.loadImageResources(resList, function(r) {
          resourceImages = r;
          continuation_();
        });

        function continuation_() {
          var width = resourceImages['back'].naturalWidth;
          var height = resourceImages['back'].naturalHeight;
          var offset = port ? g_currentDevice.portOffset : g_currentDevice.landOffset;

          var canvas = document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;

          var ctx = canvas.getContext('2d');
          if (resourceImages['shadow'] && $('#output-shadow').is(':checked')) {
            ctx.drawImage(resourceImages['shadow'], 0, 0);
          }
          ctx.drawImage(resourceImages['back'], 0, 0);
          ctx.drawImage(g_currentImage, offset[0], offset[1]);
          if (resourceImages['fore'] && $('#output-glare').is(':checked')) {
            ctx.drawImage(resourceImages['fore'], 0, 0);
          }

          var dataUrl = canvas.toDataURL();
          var filename = g_currentFilename
              ? ('framed_' + g_currentFilename)
              : 'framed_screenshot.png';

          var $link = $('<a>')
              .attr('download', filename)
              .attr('href', dataUrl)
              .attr('draggable', true)
              .attr('data-downloadurl', ['image/png', filename, dataUrl].join(':'))
              .append($('<img>').attr('src', dataUrl))
              .appendTo($('#output').empty());

          $('#rotate-button').removeAttr('disabled');
        }
      }

      $('#rotate-button').click(function() {
        if (!g_currentImage) {
          return;
        }

        var w = g_currentImage.naturalHeight;
        var h = g_currentImage.naturalWidth;
        var canvas = $('<canvas>')
            .attr('width', w)
            .attr('height', h)
            .get(0);

        var ctx = canvas.getContext('2d');
        ctx.rotate(-Math.PI / 2);
        ctx.translate(-h, 0);
        ctx.drawImage(g_currentImage, 0, 0);

        imagelib.loadFromUri(canvas.toDataURL(), function(img) {
          g_currentImage = img;
          createFrame();
        });
      });
    </script>
  </body>
</html>
